<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>媒体查询</title>
    <style>
        body{
            margin: 0;
            padding: 0;
        }


        .container{
            width: 1200px;
            height: 1200px;
            background: red;
            margin: 0 auto;
        }

        /*大屏设备  1200px以上 */
        /*版心容器  宽变成 1170px  背景颜色 黄色*/
        @media screen and (min-width: 1200px){
            .container{
                width: 1170px;
                background: yellow;
            }
        }

        /*中屏设备  992px-1200px */
        /*版心容器  宽变成 970px  背景颜色 绿色*/
        @media screen and (min-width: 992px) and (max-width: 1200px) {
            .container{
                width: 970px;
                background: green;
            }
        }

        /*小屏设备  768px-992px */
        /*版心容器  宽变成 750px  背景颜色 蓝色*/
        @media screen and (min-width: 768px) and (max-width: 992px){
            .container{
                width: 750px;
                background: blue;
            }
        }

        /*超小屏设备 768px以下 */
        /*版心容器  宽变成 100%  背景颜色  紫色*/
        @media screen and (max-width: 768px){
            .container{
                width: 100%;
                background: purple;
            }
        }


        /*媒体查询*/
        /*
        关键字 查询的是屏幕  条件是什么  and 衔接 必须有空格  （条件）
        @media screen and (min-width: 1200px){
            写css样式  选择器｛属性｝
        }
        */

    </style>
</head>
<body>
    <div class="container"></div>
</body>
</html>